const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

//这个配置文件，其实就是一个 js 文件， 通过 Node 中的模块操作，向外面暴露一个 配置对象
module.exports = {
    // 在配置文件中，需要手动指定 入口 和 出口
    entry: path.join(__dirname, './src/main.js'),//入口,表示，要用webpack打包哪个文件
    output: {
        path: path.join(__dirname, './dist'),//指定 打包好的文件，输出到哪个文件目录中去
        filename: 'bundle.js',//这是指定 输出的文件的名称
    },
    plugins: [//第三方模块的配置
        new htmlWebpackPlugin({
            template: path.join(__dirname, './src/index.html'),
            filename: 'index.html'
        }),
        new VueLoaderPlugin(),
    ],
    module: {//这个节点用于存放所有 第三方模块的 加载器
        rules: [//所有第三方模块的匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },//配置处理.css文件的第三方loader规则
            { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7000&name=[hash:8]-[name].[ext]&esModule=false' },//处理图片路径的loader
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },//处理字体文件
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },//处理babel文件
            { test: /\.vue$/, use: 'vue-loader' }, //配置处理vue文件的loader
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // Creates `style` nodes from JS strings
                    "style-loader",
                    // Translates CSS into CommonJS
                    "css-loader",
                    // Compiles Sass to CSS
                    "sass-loader",
                ],
            },
        ]
    },
    resolve: {
        alias: {
            "vue$": "vue/dist/vue.js"
        }
    },
    node: {
        fs: 'empty',
        net: 'empty',
        tls: 'empty',
        dns: 'empty'
    }

}